<h2 mat-dialog-title>Progressions overview on {{data.momentWatched.format("MMMM Do")}}</h2>
<div class="info mat-body-1">Progress Mode:
  <i *ngIf="data.progressConfig.mode === ProgressMode.YEAR_TO_DATE">Year to date</i>
  <i *ngIf="data.progressConfig.mode === ProgressMode.ROLLING">Rolling on {{data.progressConfig['rollingDays']}}
    days</i>
</div>
<div class="info mat-body-1">Activity types: <i>{{data.progressConfig.activityTypes.join(", ")}}</i></div>
<mat-dialog-content class="mat-body-1">
  <div fxLayout="row" fxLayoutAlign="space-between center">
    <ng-container *ngFor="let progressType of data.progressTypes; let index = index;">
      <div fxFlex>
        <app-year-progress-table [hideYearsColumn]="(index !== 0)"
                                 [momentWatched]="data.momentWatched"
                                 [progressConfig]="data.progressConfig"
                                 [selectedProgressType]="progressType"
                                 [selectedYears]="data.selectedYears"
                                 [yearProgressStyleModel]="data.yearProgressStyleModel"
                                 [yearProgressions]="data.yearProgressions">
        </app-year-progress-table>
      </div>
      <span *ngIf="(data.progressTypes.length !== (index + 1))" fxFlex="1"></span>
    </ng-container>
  </div>
</mat-dialog-content>
<mat-dialog-actions>
  <button color="primary" mat-dialog-close mat-stroked-button>Close</button>
</mat-dialog-actions>
